<script setup lang='ts'>
import { ref } from 'vue';
import { viewTestRoutes } from '~@/router/viewTestRoutes';
import { TestRecord } from '../types';
    const testRecords=ref<TestRecord[]>([]);
    // console.log(testRoutes); 
    testRecords.value=(viewTestRoutes[0] as any).children.map((e:any)=>
        ({
        title:(e.meta?e.meta.title:'')+'',
        name:e.name as string,
        description:'d',
        component:e.component as any
        })
    )

    // console.log('document.documentElement.clientHeight',document.documentElement.clientHeight);
    
    const refClientHeight=ref(document.documentElement.clientHeight);

</script>
<template>
    <div class="view-test-index-container" >
        <h1> View Test Index</h1>
        <ul>
            <li v-for="(item,index) in testRecords" :key="index">
            <span>{{item.title}}</span>
            <span>{{item.description}}</span>
            <RouterLink :to="{name:item.name}">{{item.name}}</RouterLink>
            </li>
        </ul>
        <div class="main" :style="{height:refClientHeight+'px'}">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<style lang='less' scoped>
.view-test-index-container{
    position: fixed;
    overflow: hidden;
}
li span{
    margin: 20px;
}
.main{
    // width: 100%;
    // height: 1000px;
}
</style>